<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 400px;
				position: relative;
			}
			
			img {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: none;
			}
			
			img:nth-child(1) {
				display: block;
			}
		</style>
	</head>

	<body>
		<div>
			<img src="主页_04.png" class="banner" alt="" />
			<img src="主页_05.png" class="banner" alt="" />
			<img src="主页_06.png" class="banner" alt="" />
		</div>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script type="text/javascript">
			var imgs = $('.banner')
			CircleShow(imgs, 1500, 1000, 1000, 3, 0)
			function CircleShow(imgs, hide, show, delay, length, i) {
				setTimeout(function() {
					//临界
					if(i == length - 1) {
						i = 0
						$(imgs[length - 1]).fadeOut(hide, function() {
							$(imgs[0]).fadeIn(show, function() {
								CircleShow(imgs,hide, show, delay, length, i)
							})
						})
					} else {
						$(imgs[i]).fadeOut(hide, function() {
							$(imgs[i+1]).fadeIn(show, function() {
								i = i+1
								CircleShow(imgs,hide, show, delay, length, i)
							})
						})
					}
				}, delay)
			}
		</script>
	</body>

</html>